<template>
  <div @click.stop="cellClick($event)">
    <div class="thead">
      <div class="tr">
        <div class="td td1">文件名称</div>
        <div class="td td2">发布单位</div>
        <div class="td td3">发布日期</div>
      </div>
    </div>
    <VueSeamless
        :data="dataList"
        :class-option="option"
        class="seamless-warp"
        @click="cellClick"
    >
      <div v-for="item in dataList" :key="item.id" style="display: flex" class="tr" >
        <div class="td td1">
          {{ item.room_text }}
        </div>
        <div class="td td2" >
          {{ item.monitor_value }}
        </div>
        <div class="td td3">
          {{ item.date }}
        </div>
      </div>
    </VueSeamless>
  </div>
</template>
<script>
import VueSeamless from "vue-seamless-scroll";
export default {
  components: {
    VueSeamless,
  },
  data() {
    return {
      option: {
        step: 0.25, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        click() {
          console.log('----')
        }
      },
      dataList: [
        /**
         * 文件名	发布单位	发布日期
         * 农业农村部办公厅关于开展2024年畜禽养殖标准化示范创建活动的通知	农业农村部办公厅	2024年02月08日
         * 农业农村部部署2024年畜牧兽医工作	畜牧兽医局	2024年03月20日
         * 农业农村部关于大力发展智慧农业的指导意见	农业农村部	2024年10月23日
         * 农业农村部关于印发《全国智慧农业行动计划（2024—2028年）》的通知	农业农村部	2024年10月23日
         * 农业农村部关于印发《生猪产能调控实施方案（2024年修订）》的通知	农业农村部	2024年2月29日
         * 农业农村部办公厅关于印发《2024年饲料质量安全监管工作方案》的通知
         *  畜牧兽医局	2024年02月05日
         */
        {
          id: 1,
          date: '2024年02月08日',
          room_text: '农业农村部办公厅关于开展2024年畜禽养殖标准化示范创建活动的通知',
          monitor_value: '农业农村部办公厅'
        },
        {
          id: 2,
          date: '2024年03月20日',
          room_text: '农业农村部部署2024年畜牧兽医工作',
          monitor_value: '畜牧兽医局'
        },
        {
          id: 3,
          date: '2024年10月23日',
          room_text: '农业农村部关于大力发展智慧农业的指导意见',
          monitor_value: '农业农村部'
        },
        {
          id: 4,
          date: '2024年10月23日',
          room_text: '农业农村部关于印发《全国智慧农业行动计划（2024—2028年）》的通知',
          monitor_value: '农业农村部'
        },
        {
          id: 5,
          date: '2024年2月29日',
          room_text: '农业农村部关于印发《生猪产能调控实施方案（2024年修订）》的通知',
          monitor_value: '农业农村部'
        },
        {
          id: 6,
          date: '2024年02月05日',
          room_text: '农业农村部办公厅关于印发《2024年饲料质量安全监管工作方案》的通知',
          monitor_value: '畜牧兽医局'
        }
      ]
    };
  },
  methods: {
    cellClick(item) {
      console.log('-----',item)
      this.$emit("cell-click", item);
    }
  }
};
</script>

<style lang="less">
.thead {
  background-color: rgba(0, 147, 167, 0.4);
}

.tr {
  display: flex;
  align-items: center;
  .td {
    //height: 32px;
    line-height: 32px;
    font-size: 12px;
    padding: 0 12px;
    color: #ffffff;
  }
  .td1 {
    width: 60%;
    text-align: left;
  }
  .td2 {
    width: 25%;
    text-align: center;
    // 溢出省略号
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .td3 {
    width: 15%;
    text-align: left;
  }
}
.seamless-warp {
  height: 175px;
  overflow: hidden;
  // 偶数行
  .tr:nth-child(2n) {
    background-color: rgba(0, 147, 167, 0.2);
  }
  .text-wrapper {
    margin: 6px 0;
    cursor: pointer;
    &:hover {
      .text {
        color: #00eff2;
      }
    }
    img {
      margin-right: 12px;
    }
  }
  .text {
    font-size: 12px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
    line-height: 16px;
  }
}
</style>
